import { View } from '@tarojs/components'
import { memo } from 'react'
import { Qr } from '@taroify/icons'
import { StaffQrcode, QrcodeTypeEnum } from '../../interface'
import './index.scss'

interface Props {
  data: StaffQrcode
}

function StaffQrcodeCell({ data }: Props) {
  // 格式化工作时间
  const formatWorkTime = (start: string, end: string) => {
    return `${start}-${end}`
  }

  return (
    <View className='staff-qrcode-cell'>
      {/* 头部信息 */}
      <View className='staff-qrcode-cell__header'>
        <View className='staff-qrcode-cell__name'>{data.name}</View>
        <View className='staff-qrcode-cell__type'>
          {data.type === QrcodeTypeEnum.CREATE_AND_USE ? '我创建的/我使用的' : '我推广的'}
        </View>
      </View>

      {/* 扫码数据 */}
      <View className='staff-qrcode-cell__stats'>
        <View className='staff-qrcode-cell__stat'>
          <View className='staff-qrcode-cell__stat-value'>{data.todayScanCount}</View>
          <View className='staff-qrcode-cell__stat-label'>扫码添加客户数</View>
        </View>
        <View className='staff-qrcode-cell__stat'>
          <View className='staff-qrcode-cell__stat-value'>{data.totalScanCount}</View>
          <View className='staff-qrcode-cell__stat-label'>今日扫码添加客户数</View>
        </View>
      </View>

      {/* 创建信息 */}
      <View className='staff-qrcode-cell__info'>
        <View className='staff-qrcode-cell__info-item'>
          <View className='staff-qrcode-cell__info-label'>创建时间：</View>
          <View className='staff-qrcode-cell__info-value'>{data.createTime}</View>
        </View>
        <View className='staff-qrcode-cell__info-item'>
          <View className='staff-qrcode-cell__info-label'>创建人：</View>
          <View className='staff-qrcode-cell__info-value'>{data.creator}</View>
        </View>
        <View className='staff-qrcode-cell__info-item'>
          <View className='staff-qrcode-cell__info-label'>创建人工作时间：</View>
          <View className='staff-qrcode-cell__info-value'>
            {formatWorkTime(data.creatorWorkTime.start, data.creatorWorkTime.end)}
          </View>
        </View>
        <View className='staff-qrcode-cell__qrcode'>
          <Qr color='#4575C9' />
        </View>
      </View>

      {/* 使用成员 */}
      <View className='staff-qrcode-cell__users'>
        <View className='staff-qrcode-cell__users-title'>使用成员</View>
        {data.users.map(user => (
          <View key={user.userId} className='staff-qrcode-cell__user'>
            <View className='staff-qrcode-cell__user-name'>{user.userName}</View>
            {data.userWorkTime.map(workTime => {
              if (workTime.userId === user.userId) {
                return (
                  <View key={workTime.userId} className='staff-qrcode-cell__user-time'>
                    工作时间：{formatWorkTime(workTime.start, workTime.end)}
                  </View>
                )
              }
              return null
            })}
          </View>
        ))}
      </View>
    </View>
  )
}

export default memo(StaffQrcodeCell)
